import lodash from 'lodash';

export default (elementRef, otherHeight = 230, noSearch = false) => {
  const tableHeight = ref(500); //表格高度
  const queryFormRefHeight = ref(); //表格高度
  const showSearch = ref(true); //是否隐藏搜索框
  const { isFullscreen } = useFullscreen(); //是否全屏
  const isActive = ref(true); // 路由是否激活
  onMounted(() => {
    // nextTick(() => {
    //   if (elementRef.value) {
    //     // console.log(elementRef.value.$el.offsetHeight);
    //     queryFormRefHeight.value = elementRef.value.$el.offsetHeight;
    //   }
    // }).then();
    window.addEventListener('resize', handleResize);
  });
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
  });
  const getTableHeight = () => {
    setTimeout(() => {
      nextTick(() => {
        // 先重新计算搜索框高度
        if (elementRef.value && !noSearch && showSearch.value) {
          // 这里用真实 DOM 的 offsetHeight
          queryFormRefHeight.value = elementRef.value.$el?.offsetHeight || 0;
        } else {
          queryFormRefHeight.value = 0;
        }
        if (noSearch) {
          // console.log('全屏', window.innerHeight - otherHeight);
          tableHeight.value = window.innerHeight - otherHeight;
          return;
        }
        if (showSearch.value) {
          tableHeight.value = window.innerHeight - queryFormRefHeight.value - otherHeight - 15;
        } else {
          tableHeight.value = window.innerHeight - otherHeight;
          // tableHeight.value = window.innerHeight - 68 - 32;
        }
      }).then();
    }, 100);
  };
  const handleResize = lodash.debounce(
    () => {
      console.log('窗口大小发生变化，执行某些操作...');
      getTableHeight();
    },
    500,
    { leading: true, trailing: false }
  );
  /** 监听搜索框隐藏 */
  watch(
    () => showSearch.value,
    (newV, oldV) => {
      if (newV) {
        nextTick(() => {
          if (elementRef.value) {
            queryFormRefHeight.value = elementRef.value.$el.offsetHeight;
          }
        }).then();
      }
      getTableHeight();
    },
    {
      immediate: true,
      deep: true
    }
  );
  // watch(
  // 	() => showSearch.value,
  // 	(newV) => {
  // 		if (newV) {
  // 			// 增加延迟 + nextTick，确保内容渲染完再获取高度
  // 			nextTick(() => {
  // 				setTimeout(() => {
  // 					if (elementRef.value) {
  // 						// 建议使用真实的 DOM 而不是 $el
  // 						const realHeight = elementRef.value?.$el?.offsetHeight || 0;
  // 						queryFormRefHeight.value = realHeight;
  // 						getTableHeight();
  // 					}
  // 				}, 200); // 你可以根据实际情况调小或调大延迟时间
  // 			});
  // 		} else {
  // 			// 搜索框隐藏时直接计算
  // 			nextTick(() => {
  // 				queryFormRefHeight.value = 0;
  // 				getTableHeight();
  // 			});
  // 		}
  // 	},
  // 	{
  // 		immediate: true
  // 	}
  // );

  /** 监听全屏 */
  watch(
    () => isFullscreen.value,
    (newV, oldV) => {
      if (isActive.value) {
        getTableHeight();
      }
    },
    {
      immediate: true,
      deep: true
    }
  );
  onActivated(() => {
    isActive.value = true;
    getTableHeight();
  });

  onDeactivated(() => {
    isActive.value = false;
  });

  return {
    showSearch,
    tableHeight,
    getTableHeight
  };
};
